<script src="dhtml/dhtmlx.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="dhtml/dhtmlx.css">

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="json2db.js"></script>
<script src="json2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<table width="500px" id="paging_container">
   <tr>
      <td id="recinfoArea"></td>
   </tr>
   <tr>
      <td>
         <div id="gridbox" style="widht:100%; height:150px; background-color:white;overflow:hidden"></div>
      </td>
   </tr>
   <tr>
      <td id="pagingArea"></td>
   </tr>
</table>
<form id="form1">
name：<input type="text" id="name" name="name" size="10">
state：<input type="text" id="state" name="state" size="10">
</form>
<button onclick="insert()">添加</button>
<button onclick="update()">修改</button>
<button onclick="del()">删除</button>
	
<script>
var j2db=new json2Db("users");
 
//j2db.insert({name:"丽梅",state:"中国"});
//j2db.insert({name:"丽梅",state:"中国"});
//j2db.insert({name:"丽梅",state:"中国"});
var _json;

var mygrid = new dhtmlXGridObject('gridbox');
j2db.index({success:function(json){
_json=json;
mygrid.setImagePath("dhtml/imgs/");
mygrid.setHeader(json.columns);
mygrid.init();
mygrid.parse(json,"json");
mygrid.attachEvent("onRowSelect", doOnRowSelected);
}});

function insert(){
	//mygrid.addRow('newId',"text1,text2",1);
	//alert($('#name').val());
	j2db.insert({row:{name:$("#name").val(),state:$("#state").val()},success:function(json){
		alert(json);
		//mygrid.addRow(json,[$("#name").val(),$("#state").val()]);
	}});

}
function del(){
	j2db.del({id:mygrid.getSelectedRowId(),success:function(json){
		mygrid.deleteSelectedRows();
	}});
	
}
function doOnRowSelected(rId,ind) {
	//$('#name').val(_json.rows[mygrid.getRowIndex(rId)].data[1]);
	//$('#state').val(_json.rows[mygrid.getRowIndex(rId)].data[2]);
}

function update(){
	j2db.update({id:mygrid.getSelectedRowId(),success:function(json){
		mygrid.deleteSelectedRows();
	}});
	
}


</script>